<template>
    <table border="1px">
        <tbody>
            <tr>
                <td>编号</td>
                <td width="100px">物品名称</td>
                <td>单价</td>
                <td width="100px">数量</td>
                <td>小计</td>
            </tr>

            <tr>
                <td>001</td>
                <td>铅笔</td>
                <td>2</td>
                <td><button class="button-left" @click="jian">-</button>
                    <span>{{ n1 }}</span>
                    <button class="button-right" @click="add">+</button>
                </td>
                <td v-bind="he1">{{ re1 }}</td>
            </tr>


            <tr>
                <td>002</td>
                <td>橡皮</td>
                <td>3</td>
                <td><button class="button-left" @click="jian1">-</button>
                    <span>{{ n2 }}</span>
                    <button class="button-right" @click="add1">+</button>
                </td>
                <td>{{ re2 }}</td>
            </tr>

            <tr>
                <td colspan="4" style="text-align: left;">总计</td>
                <td>{{ hh() }}</td>
            </tr>

            <tr>
                <td colspan="4"></td>
                <td><button @click="pp">确认购买</button></td>
            </tr>


        </tbody>
    </table>
</template>



<script setup>
import { ref } from 'vue'

const n1 = ref(0)
const n2 = ref(0)
const re1 = ref(0)
const re2 = ref(0)
const re3 = ref(0)



const jian = () => {
    if (n1.value <= 0) {
        alert('数量不能小于0')
    }
    else {
        n1.value--
        re1.value = n1.value * 2
    }
}

const add = () => {
    if (n1.value >= 5) {
        alert('数量超过上限')
    }
    else {
        n1.value++
        re1.value = n1.value * 2
    }
}

const jian1 = () => {
    if (n2.value <= 0) {
        alert('数量不能小于0')
    }
    else {
        n2.value--
        re2.value = n2.value * 3
    }
}

const add1 = () => {
    if (n2.value >= 5) {
        alert('数量超过上限')
    }
    else {
        n2.value++
        re2.value = n2.value * 3
    }
}

const hh = () => {
    return re3.value = re1.value + re2.value
}

const pp = () => {
    alert('购买成功')
}

</script>



<style>
.button-left {
    float: left;
    width: 32px;
    height: 40px;
}

.button-right {
    float: right;
    width: 32px;
    height: 40px;
}
</style>